<template>
  <div class="map-wrapper">
    <van-nav-bar title="城市选择" left-arrow @click-left="onClickLeft" />
    <div class="map-wrapper">
        <baidu-map
            ref="refMap" 
            :center="center"
            :zoom="zoom"
            style="height:1080px" 
            :scroll-wheel-zoom='true'
            @click="getClickInfo"
            @touchmove="touchMove"
            @touchend="touchEnd"
        >
        <!-- 地图类型 -->
        <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
        <!-- 比例尺 -->
        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
        <!-- 缩放 -->
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        <!-- 定位 -->
         <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true" @locationSuccess="locationSuccess" @locationError="locationError"></bm-geolocation>
        <!-- 覆盖物 -->
        <my-overlay
          v-for="v in cityHouseList"
          :key="v.value"
          pane="labelPane"
          :class="{sample: true}"
          :position="v.coord|point"
          :active="v.active"
          @mouseover.native="v.active = true"
          @mouseleave.native="v.active = false"
          >
          <div @click="overlayClick(v)">
            <p>{{v.label}}</p>
            <p>{{v.count}}套</p>
          </div>
        </my-overlay>
        </baidu-map>
    </div>
    <van-popup v-model="popShow" closeable position="bottom" :style="{ height: '40%' }">
      <div class="popUp-head"></div>
      <div class="popUp-main">
        <house-item v-for="item in houseList" :key="item.houseCode" :houseItem="item"></house-item>
      </div>
      
    </van-popup>
  </div>
</template>

<script>
import {mapMutations, mapState} from 'vuex';
import MyOverlay from '../components/MyOverlay.vue';
import HouseItem from "@/components/HouseItem.vue"
export default {
  data() {
    return {
      zoom: 12,
      cityHouseList:[], //覆盖物
      houseList:[], //房源
      mapFloor:3,
      currentId:'',
      popShow:false,
    };
  },
  components:{
    MyOverlay,
    HouseItem,
  },
  computed:{
    ...mapState('city',['center','cityname','cityId'])
  },
  created(){
    this.getMapList();
  },
  filters:{
    point(v){
      return{
        lat:v.latitude,
        lng:v.longitude
      }
    }
  },
  methods: {
    ...mapMutations('city',['setCenter']),
    overlayClick(item){
      console.log(item);
      this.currentId = item.value;
      if(this.mapFloor <=1){
        /*----------------------------------------------- */
        
        this.getHouseList(this.currentId).then(res=>{
          console.log(res);
          if(res.body.count == 0)return this.$toast('没有找到匹配的房源')
          this.popShow = true;
        })
        return;
      } 
      this.cityHouseList = [];
      this.mapFloor --;
      
      this.getMapList(this.currentId);
      // this.currentId=item.value;
      // this.
      // this.clearOverlayy();
    },
    clearOverlayy(){
      const { map} = this.$refs.refMap;
      map.clearOverlays()
    },
    async getMapList(currentId){
      let {cityId:id} = this;
      if(currentId) id = currentId;

      this.$toast.loading({message: '加载中...',forbidClick: true,duration: 0});
      const {data} = await this.$http.getAreaMap({id})
      this.cityHouseList = data.body.map(item=>{
        return{
          ...item,active:false
        }
      });
      if(currentId) this.zoom +=2;
      this.setCenter(data.body[0].coord);
      this.$toast.clear();
     
    },
    async getHouseList(cityId){
      const {data} = await this.$http.getHouse({cityId})
      this.houseList = data.body.list.map(item=>{
        return{
          ...item,
          houseImg:"http://47.102.145.189:8009"+item.houseImg
        }
      });
      console.log(data);
      return data;
    },
    onClickLeft() {
      this.$router.go(-1);
    }, 
    getClickInfo (e) {
      // console.log(e);
      // console.log(e.point.lng)
      // console.log(e.point.lat)
      // this.center.lng = e.point.lng
      // this.center.lat = e.point.lat
    },
    locationSuccess({point, AddressComponent, marker}){
        console.log(point, AddressComponent, marker);
        this.center=point;
    },
    locationError({StatusCode}){
        console.log(StatusCode);
    },
    touchMove(){
      const { map} = this.$refs.refMap;
      map.enableDragging();
    },
    touchEnd(){
      const { map} = this.$refs.refMap;
      map.disableDragging();
    }
  },
};
</script>

<style lang="less">
.map-wrapper{
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .map-wrapper{
        flex: 1;
        overflow: hidden;
        position: relative;
    }
}
.sample {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border:1px solid #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  overflow: hidden;
  box-shadow: 0 0 5px #000;
  color: #fff;
  text-align: center;
  position: absolute;
}
.popUp-main{
  margin-top: 35px;
  padding: 0 15px;
  overflow-y: auto;
}
</style>